<style scoped lang="less">
	@import "GoodsDetail";
	
</style>
<template>
	<div>
		<van-pull-refresh class="container" v-model="isLoading" @refresh="onRefresh">
			<div class="content" v-if="goodsData!=null">
				<!--  大图-->
				<div class="goods-banner">
					<van-swipe v-if="goodsData!=null&&goodsData.banners.length>0" class="swipe" indicator-color="white">
						<van-swipe-item v-if="goodsData.video!=null&&goodsData.video.length>0" class="item">
							<video class="item-video" controls webkit-playsinline="true" playsinline="true" x5-playsinline="true"
							       style="background-color: rgb(0, 0, 0);" :poster=" GLOBAL.getUrl(goodsData.banners[0])"
							       :src="GLOBAL.getUrl(goodsData.video[0])"></video>
						</van-swipe-item>
						<van-swipe-item class="item" v-for="(item, index) in goodsData.banners" :key="index">
							<van-image :src="GLOBAL.getUrl(item)"></van-image>
						</van-swipe-item>
					</van-swipe>
				</div>
				<div class="count-down-wrap">
					<span class="count-down-title">{{goodsData.type==GLOBAL.ACTIVE_TYPE_KJ?'限时砍价':'限时抢购'}}</span>
					<van-count-down v-if="time>=0" format="还剩 DD 天 HH : mm : ss 结束" :time="time"/>
					<span v-else class="count-down-timeout">
						已结束
					</span>
				</div>
				
				<div class="info-wrap" v-if="goodsData!=null">
					<!--  价格及人气-->
					<div class="goods-info-wrap">
						<div class="price-wrap">
							<div class="price-lowest"><span class="symbol">￥</span>{{(goodsData.sku[0].lowest_price+0.0)/100}}</div>
							<div class="price-or"><span class="symbol">￥</span>{{(goodsData.sku[0].original_price+0.0)/100}}</div>
						</div>
						<div class="views-wrap">
							<van-icon class="views" name="fire"/>
							<span class="views-num">{{goodsData.views}}</span>
						</div>
					
					</div>
					<!--  标题-->
					<div class="title-wrap">
						<img v-if="goodsData.store_data.tag!=null&&goodsData.store_data.tag_img!=null" class="store-tag"
						     :src="GLOBAL.getUrl(JSON.parse(goodsData.store_data.tag_img)[0])">{{goodsData.title}}
					</div>
					<div class="sales-title">
						<span class="sales-saled">已售:{{goodsData.sku[0].sales+goodsData.sku[0].init_sales}}件</span>
						<!--这里只显示当前-->
						<span class="sales-stock">仅剩:{{goodsData.sku[0].stock}}件</span>
					</div>
					<!--					砍价进度-->
					<KanJiaProgress v-if="GLOBAL.ACTIVE_TYPE_KJ==goodsData.type && goodsData.kanjia_data!==null"
					                @kj-success="init" :kanjia_data="goodsData.kanjia_data"
					></KanJiaProgress>
					<!--  推荐语-->
					<div class="recommend-wrap" v-if="goodsData.recommend_desc!=null&&goodsData.recommend_desc.length>0">
						<div class="recommend-title">推荐理由</div>
						<div class="recommend-content">
							<span class="sanjiao"></span>
							<div v-for="(item,index) in goodsData.recommend_desc" :key="index" class="content-item">
								<span class="item-num">{{index+1}}</span>
								<span class="item-content">{{item.content}}</span>
							</div>
						</div>
					</div>
					<!--  套餐  -->
					<div class="line" id="skus" v-if="goodsData.sku.length>1"></div>
					<div class="sku-wrap" v-if="goodsData.sku.length>1">
						<van-divider class="part-title">可选套餐</van-divider>
						<template v-for="(item,index) in goodsData.sku">
							<div v-if="index!==0" class="sku-item" :key="index">
								<div class="sku-item-wrap">
									<div class="sku-item-title-wrap">
										<span class="sku-item-title">{{item.title}}</span>
										<span
											class="sku-item-title-sales">已售:{{item.sales+item.init_sales}}&nbsp;&nbsp;仅剩:{{item.stock}}件</span>
									</div>
									<!-- 价格-->
									<div class="sku-item-right-wrap">
										<div class="sku-item-right-price-wrap">
											<div class="sku-item-right-price-normal">
												<span class="symbol">￥</span>
												<span class="sku-item-price">{{(item.lowest_price+0.0)/100}}</span>
											</div>
											<div class="sku-item-right-price-vip">
												<van-image class="vip-icon"
												           :src="GLOBAL.getUrl('asset/icon/icon_detail_vip.png',false,true)"></van-image>
												<span class="symbol">￥</span>
												<span class="sku-item-price">{{(item.lowest_price+0.0-item.vip_discount)/100}}</span>
											</div>
										</div>
										<div class="sku-item-right-btn-buy" :class="time<0?'time-out':''" @click="toSubmit(item)">立即下单
										</div>
									</div>
								</div>
							</div>
						</template>
					
					</div>
					<div class="line" v-if="laseBuyUserData!=null"></div>
					<!--					最近购买用户-->
					<div class="latest-buy-users" v-if="laseBuyUserData!=null">
						<van-divider class="part-title">下单用户</van-divider>
						<div class="user-wrap">
							<template v-for="item in laseBuyUserData">
								<img class="latest-buy-user-img" :src="item.head_img"/>
							</template>
						</div>
					</div>
					<GoodsComment class="goods-comment-wrap" :loadMore="false" :goods_id="goodsData.id"></GoodsComment>
					<div class="line"></div>
					<!--					商家信息-->
					<div class="store-wrap">
						<van-divider class="part-title">商家信息</van-divider>
						<div>
							<div class="store-name-wrap">
								<img class="store-img" :src="GLOBAL.getUrl(JSON.parse(goodsData.store_data.store_img)[0])">
								<span class="store-name">{{goodsData.store_data.name}}</span>
							</div>
							<div class="store-business-time">
								<span class="store-info-title">营业时间</span>
								<span class="store-info-business-time store-info-content">{{goodsData.store_data.business_start.substr(0,5)}}-{{goodsData.store_data.business_end.substr(0,5)}}</span>
							</div>
							<div class="store-info-item">
								<span class="store-info-wrap">
									<span class="store-info-title">联系电话</span>
									<span class="store-info-content">{{goodsData.store_data.phone}}</span>
								</span>
								<a class="store-info-op" :href="'tel:'+goodsData.store_data.phone">拔打</a>
							</div>
							<div class="store-info-item">
								<span class="store-info-wrap">
									<span class="store-info-title">商家地址</span>
									<span class="store-info-content">{{goodsData.store_data.address}}</span>
								</span>
								<a class="store-info-op" @click="toLocation">导航</a>
							</div>
						</div>
					</div>
					<div v-if="goodsData.notice_content!=null" class="line"></div>
					<div v-if="goodsData.notice_content!=null" class="notice-wrap">
						<van-divider class="part-title">购买须知</van-divider>
						<div class="richtext" v-html="goodsData.notice_content"></div>
					</div>
					<div class="line"></div>
					<div class="detail-wrap">
						<van-divider class="part-title">商品详情</van-divider>
						<div class="richtext" v-html="goodsData.content"></div>
					</div>
					<div class="line"></div>
				</div>
        <KanJiaHelp v-if="GLOBAL.ACTIVE_TYPE_KJ==goodsData.type" :kanjia_data="goodsData.kanjia_data"></KanJiaHelp>
			</div>
		</van-pull-refresh>
		<div class="op-bottom" v-if="goodsData!=null">
			<div class="op-left">
				<div class="op-item" @click="toHome">
					<van-image class="op-icon" :src="GLOBAL.getUrl('asset/icon/icon_detail_home.png',false,true)"></van-image>
					<div class="op-item-title">首页</div>
				</div>
				<div class="op-item" @click="toKeFu">
					<van-image class="op-icon" :src="GLOBAL.getUrl('asset/icon/icon_detail_kefu.png',false,true)"></van-image>
					<div class="op-item-title">客服</div>
				</div>
				<div class="op-item" @click="toTouShu">
					<van-image class="op-icon" :src="GLOBAL.getUrl('asset/icon/icon_detail_toushu.png',false,true)"></van-image>
					<div class="op-item-title">投诉</div>
				</div>
			</div>
			<!--砍价-->
			<KanJiaOpButton v-if="GLOBAL.ACTIVE_TYPE_KJ==goodsData.type" class="op-btn-buy"
			                @kj-submit="kanjiaSubmit"
			                @kj-refresh="init"
			                :kanjia_data="JSON.stringify(goodsData.kanjia_data)"
			                :goods_id="goodsData.id"
			                :sku_id="goodsData.sku[0].id"
			                :is_end="time<0"
			                :is_sold_out="goodsData.sku[0].stock===0"
			                :class="(time<0||goodsData.sku[0].stock===0)?'time-out':''">
			</KanJiaOpButton>
			<div v-else class="op-btn-buy" @click="toSubmit(goodsData.sku[0])"
			     :class="(time<0||goodsData.sku[0].stock===0)?'time-out':''">{{(time<0)
				?'已结束':((goodsData.sku[0].stock===0)?'已售完':'立即购买')}}
			</div>
		</div>
		<span class="build-banner">
      <span class="build-btn" @click="buildBanner">生成海报</span>
    </span>
		<van-overlay :show="show" @click="show = false">
			<div v-if="show" class="wrapper">
				<div class="share-banner" @click.stop>
					<img class="share-banner-img" :src="shareBanner">
				</div>
			</div>
		</van-overlay>
		<CanvasPoster v-if="create" :painting="painting" @success="buildSuccess" @fail="buildFail"></CanvasPoster>
		<div class="show-customers-wrap" v-if="laseBuyUserData!=null&&showCustomerindex>=0">
			<span :class="customerChange" class="show-customers">
				<div class="customer" :class="customerTextChange">
					<img class="customer-img" :src="laseBuyUserData[showCustomerindex].head_img">
					<span>{{laseBuyUserData[showCustomerindex].nickname}}  刚刚购买了本产品</span>
				</div>
				
			</span>
		</div>
		<CustomerService v-model="show_kefu"></CustomerService>
	</div>
</template>
<script>
  import axios from '@/libs/api.request';
  import {getDateDiff} from '@/libs/util';
  import CanvasPoster from '../../components/common/BannerBuilder/canvas-poster'
  import KanJiaProgress from '../../components/goods/KanJiaProgress'
  import KanJiaOpButton from '../../components/goods/KanJiaOpButton'
  import KanJiaHelp from '../../components/goods/KanJiaHelp'
  import GoodsComment from '../../components/goods/GoodsComment'
  import CustomerService from '../../components/common/CustomerService'
  import Vue from 'vue';
  import {Swipe, SwipeItem, Image, Icon, PullRefresh, Divider, CountDown, Overlay,Popup} from 'vant';

  Vue.use(Image).use(Swipe).use(SwipeItem).use(Icon).use(PullRefresh).use(Divider).use(CountDown).use(Overlay).use(Popup);
  import {getDetail} from "../../api/goods";
  import {getUserInfo} from "../../api/user";
  import {Toast} from 'vant';

  export default {
    name: 'GoodsDetail',
    components: {
      CanvasPoster,
      KanJiaProgress,
      KanJiaOpButton,
      KanJiaHelp,
      GoodsComment,
      CustomerService
    },
    data() {
      return {
        show_kefu: false,
        show: false,
        create: false,
        time: 0,
        id: null,
        customerChange: '',
        customerTextChange: '',
        goodsData: null,
        isLoading: false,
        shareBanner: '',
        shareBannerBg: '',
        userData: null,
        timeShowCustomer: null,
        laseBuyUserData: null,
        showCustomerindex: -1,
        shareObj: {title: '', link: '', imgUrl: '', desc: ''},
        painting: {
          width: 550,
          height: 876,
          views: [
            {
              type: 'rect',
              top: 0,
              left: 0,
              background: '#f4f5f7',
              width: 550,
              height: 876
            },
            {
              type: 'image',
              url: '',
              left: 0,
              top: 0,
              width: 550,
              height: 600,
              // radius: 40
            },
            {
              type: 'text',
              content: `长按或扫描二维码`,
              fontSize: 18,
              color: '#999999',
              top: 849,
              left: 385
            }, {
              type: 'qrcode',
              content: '',
              background: '#fff',
              color: '#000',
              left: 345,
              top: 640,
              width: 200,
              height: 200
            },
            {
              type: 'image',
              url: '',
              left: 0,
              top: 640,
              width: 100,
              height: 100,
              radius: 50
            },
          ]
        },
      };
    },
    created() {
      this.init();
    },

    beforeDestroy() {
      if (this.timeShowCustomer != null)
        clearInterval(this.timeShowCustomer);
    },
    methods: {
      init() {
        let id = this.$route.params.id;
        if (id) {
          this.id = id;
          let vm = this;
          axios.all([getUserInfo(), getDetail({id: this.id})])
            .then(axios.spread((userInfo, goodsInfo) => {
              vm.getDetail(goodsInfo);
              vm.getUserData(userInfo);
              vm.$store.commit('setUserInfo', userInfo.data.data)
              vm.startShowCustomer();
              vm.$wx.wxJssdkInit();
              vm.$wx.wxShare(vm.shareObj);
            }));

        } else {
          Toast.fail('无效的id');
        }
      },
      startShowCustomer() {
        let vm = this;
        if (vm.laseBuyUserData === null) {
          return;
        }
        this.$nextTick(v => {
          vm.timeShowCustomer = setInterval(vm.changeCustomer, 6200);
        })
      },
      changeCustomer() {
        this.customerChange = 'hide';
        this.customerTextChange = 'hide';
        if ((this.showCustomerindex + 1) >= this.laseBuyUserData.length) {
          this.showCustomerindex = 0;
        } else {
          this.showCustomerindex++;
        }
        setTimeout(() => {
          this.customerChange = 'wrap-showNext';
          this.customerTextChange = 'showNext-text';
        }, 1000);

      },
      buildBanner() {
        if(this.create){
          this.show = true;
        }else {
          this.create = true;
        }
      },
      getUserData(rep) {
        let vm = this;
        this.userData = rep.data.data;
        vm.painting.views[3].content = window.location.protocol + '//' + window.location.host + vm.$route.fullPath + '?invid=' + rep.data.data.inv_code;
        vm.painting.views[4].url = rep.data.data.head_img;
        vm.shareObj.link = vm.painting.views[3].content;
      },
      toLocation() {
        let vm = this;
        wx.openLocation({
          latitude: parseFloat(vm.goodsData.store_data.la), // 纬度，浮点数，范围为90 ~ -90
          longitude: parseFloat(vm.goodsData.store_data.ln), // 经度，浮点数，范围为180 ~ -180。
          name: vm.goodsData.store_data.name, // 位置名
          address: vm.goodsData.store_data.address, // 地址详情说明
          scale: 10, // 地图缩放级别,整形值,范围从1~28。默认为最大
          infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
        });
      },
      buildSuccess(src) {
        this.shareBanner = src;
        this.show = true;
      },
      buildFail(e) {
      },
      onRefresh() {
        this.getDetail();
      },
      toHome() {
        this.$router.push({name: 'home'})
      },
      toKeFu() {
        this.show_kefu=true;
      },
      toTouShu() {
        this.$router.push({name:'goods-complain',params:{goods_id:this.id}})
        // this.$wx.wxJssdkInit();
      },
      kanjiaSubmit(kanjiaOrderId, invid) {
        this.toSubmit(this.goodsData.sku[0], kanjiaOrderId, invid);
      },
      toSubmit(sku, kanjiaOrderId = null, invid = null) {
        if (sku.stock <= 0) {
          Toast.fail('当前套餐已售完，请选择其它套餐');
          document.getElementById("skus").scrollIntoView();
          return;
        }
        if (this.time < 0) {
          return;
        }
        let params = {id: this.goodsData.id, skuid: sku.id};
        let query = {};
        if (invid === null) {
          //添加了分享人ID，如果是自己分享给自己则不计算
          if (this.$route.query.invid !== undefined && this.$route.query.invid !== null) {
            invid = this.$route.query.invid;
          }
        }
        if (invid != null && this.userData['inv_code'] !== this.$route.query.invid) {
          params.invid = invid;
        }
        //判断是否砍价订单
        if (kanjiaOrderId != null) {
          query.kanjia_order_id = kanjiaOrderId;
        }
        this.$router.push({name: 'submit', params: params,query:query});
      },
      getDetail(rep) {
        let vm = this;
        vm.isLoading = false;
        vm.goodsData = rep.data.data;
        vm.laseBuyUserData = vm.goodsData.latest_bougth_user.length > 0 ? vm.goodsData.latest_bougth_user : null;
        vm.goodsData.banners = JSON.parse(vm.goodsData.banners);
        vm.goodsData.video = JSON.parse(vm.goodsData.video);
        vm.goodsData.share_img = JSON.parse(vm.goodsData.share_img);
        vm.goodsData.recommend_desc = JSON.parse(vm.goodsData.recommend_desc);
        vm.time = getDateDiff(vm.goodsData.end_time);
        vm.painting.views[1].url = vm.GLOBAL.getUrl(JSON.parse(vm.goodsData.share_img_bg)[0]);
        vm.shareObj.title = vm.goodsData.share_title;
        vm.shareObj.imgUrl = vm.GLOBAL.getUrl(vm.goodsData.share_img[0], false, true);
        vm.shareObj.desc = vm.goodsData.share_content
      }
    }
  }
</script>